{extend name="public/public"} {block name="content"}
<div class="c1">
  <div class="c2 flex">
    <a href="{:url('index')}">首页</a><span>/</span>
    <div>产品中心</div>
  </div>
  <div class="c3 flex">
    <div class="c4">
      <div class="c6">产品中心</div>
      <div class="c7">
        <div class="c8 {if $type==0}active{/if}">
          <span></span>
          <a href="{:url('product',array('type_id'=>0))}" class="flex"
            >全部 <i class="iconfont">&#xe76e;</i></a
          >
        </div>
        {volist name="$typeData" id="v"} {if $v['pid']=='0'}
        <div class="c8 {if $type==$v['id']}active{/if}">
          <span></span>
          <a href="{:url('product',array('type_id'=>$v['id']))}" class="flex"
            >{$v['name']} <i class="iconfont">&#xe76e;</i></a
          >
        </div>
        {volist name="$typeData" id="vo"} {if $vo['pid']==$v['id']}
        <div class="c8 {if $type==$vo['id']}active{/if}">
          <a
            href="{:url('product',array('type_id'=>$vo['id']))}"
            class="b1 flex"
            >{$vo['name']} <i class="iconfont">&#xe76e;</i></a
          >
        </div>
        {/if} {/volist} {/if} {/volist}
      </div>
    </div>
    <div class="c5 cle">
      {volist name="productData" id="vo"}
      <a
        class="c9"
        href="{:url('product_details',array('id'=>$vo['id'],'type_id'=>$type))}"
      >
        <div class="c10"><img src="/uploads/{:explode(',',$vo.img)[0]}" alt="" /></div>
        <div class="c11">
          <p><span>{$vo.typeName}</span> / {$vo.name}</p>
        </div>
      </a>
      {/volist}
    </div>
  </div>
  <div class="c12">
    <div id="page"></div>
  </div>
</div>

{/block} {block name='js'}
<script>
  $(".nav-active-2").addClass("current-menu-item");
  layui.use("laypage", function () {
    var laypage = layui.laypage;
    laypage.render({
      elem: "page",
      theme: "color",
      limit: Number("{$limit}"),
      curr: Number("{$page}"), //当前页
      count: "{$count}",
      jump: function (obj, first) {
        var curr = obj.curr; //当前页
        if (!first) {
          var str = "{:url('product',array('page'=>'anan','type'=>$type))}"; //先将变量以字符串的形式带入U函数中
          window.location.href = str.replace("anan", curr); //将代替变量的字符串用真实变量替换掉，OK搞定！
        }
      },
    });
  });

  $(".c6").click(function () {
    $(".c7").slideToggle();
  });
</script>
{/block} {block name='css'}
<style>
  .layui-laypage-color .layui-laypage-curr .layui-laypage-em {
    background: var(--main-color);
  }
  .c1 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 0;
  }
  .c2 {
    margin-bottom: 20px;
    font-size: 16px;
  }
  .c2 a {
    color: #666;
  }
  .c2 span {
    display: inline-block;
    margin: 0 10px;
  }
  .c3 {
    align-items: flex-start;
  }
  .c4 {
    width: 230px;
  }
  .c5 {
    margin-left: 20px;
    flex: 1;
  }
  .c6 {
    background: var(--main-color);
    color: #fff;
    padding: 20px 25px;
    font-size: 18px;
    justify-content: space-between;
  }
  .c6 .iconfont {
    display: none;
  }
  .c7 {
    border: 1px solid var(--main-color);
  }
  .c8 {
    border-bottom: 1px solid var(--main-color);
    position: relative;
  }
  .c8:last-child {
    border: 0;
  }
  .c8 a {
    padding: 15px 25px 15px 35px;
    color: #555;
  }
  .c8 .flex {
    justify-content: space-between;
  }
  .c8 .iconfont {
    transition: 0.1s;
    display: none;
  }
  .c8 .b1 {
    margin-left: 0px;
  }
  .c8.active .iconfont {
    display: block;
  }
  .c8:hover .iconfont {
    display: block;
  }
  .c8.active a {
    color: #000;
    background: #f3f3f3;
  }
  .c8 span {
    transition: 0.3s;
    display: block;
    width: 4px;
    background: var(--main-color);
    position: absolute;
    left: 15px;
    height: 20px;
    bottom: 50%;
    margin-bottom: -10px;
  }
  .c9 {
    float: left;
    display: block;
    width: 31.33%;
    margin: 1%;
    margin-top: 0;
    padding: 10px;
    background: #f6f6f6;
    transition: 0.1s;
  }
  .c9 img {
    width: 100%;
    display: block;
  }
  .c9:hover {
    background: var(--main-color);
  }
  .c9:hover .c11 {
    color: #fff;
  }
  .c10 {
    background: #fff;
  }
  .c11 {
    padding-top: 10px;
    height: 54px;
    overflow: hidden;
  }
  .c11 .b2 {
    font-size: 12px;
  }
  .c11 {
    color: #555;
    line-height: 22px;
    margin: 0;
  }
  .c12 {
    margin-top: 30px;
  }
  .c12 #page {
    text-align: right;
  }
  @media screen and (max-width: 1380px) {
    .c4 {
      width: 200px;
    }
  }
  @media screen and (max-width: 960px) {
    .c1 {
      padding: 20px;
    }
    .c3 {
      display: block;
    }
    .c4 {
      width: 100%;
    }
    .c5 {
      margin-left: 0;
      margin-top: 20px;
    }
    .c6 .iconfont {
      display: block;
    }
    .c7 {
      display: none;
    }
  }
  @media screen and (max-width: 860px) {
    .c9 {
      width: 48%;
    }
  }

  @media screen and (max-width: 500px) {
    .c9 {
      width: 100%;
      margin: 0 0 20px;
    }
    .c12 #page {
      text-align: center;
    }
  }
</style>
{/block}
